<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录</title>

    <!-- Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
    <link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <!--    引入首页样式-->
    <link href="Santa.ico" rel="shortcut icon"/>
    <!--    引入首页样式-->
    <link rel="stylesheet" type="text/css" href="indexCss.css">
    <style>
        section{
            padding: 100px;
        }
        a:hover{cursor:pointer}
    </style>
</head>
<body>
<!--背景线条-->
<script src="https://cdn.bootcss.com/canvas-nest.js/1.0.1/canvas-nest.min.js" type="text/javascript"></script>
　
<!--右键出字体-->
<script src="admin/adminjs/bg.js"></script>

<!--正文在这里继续-->
<!--登录-->
<section class="container">
    <div class="row">
        <div class="col-md-7 col-md-offset-2" style="color:#000;text-align: center">
            <h1>中交兴路欢迎您</h1>
        </div>
    </div>
    <div  class="alert alert-danger"
          v-show="hasError">
        <i class="fa fa-exclamation-triangle"></i>
        <span v-text="message"></span>
        <a @click="logout()" class="btn btn-gander" v-show="haslogin" >注销登录</a>
        <a class="btn btn-gander" href="admin/Mall/indexMall.html" v-show="haslogin">返回商城首页</a>
    </div>
    <div class="row">
        <div class="col-md-1"></div>
        <div class="col-md-5 col-md-offset-2">
            <div class="panel panel-default">
                <div class="panel-heading">登录</div>
                <div class="panel-body" >
                    <div>
                        <div class="alert alert-danger" v-show="show1">
                            <i class="fa fa-exclamation-triangle"></i> 账号或密码错误
                        </div>
                        <div  class="alert alert-info" v-show="show2" >
                            <i class="fa fa-exclamation-triangle"></i> 已经登出系统
                        </div>
                        <div class="alert alert-info" v-show="show3">
                            <i class="fa fa-exclamation-triangle"></i> 已经成功注册，请登录。
                        </div>
                    </div>
                    <form action="/mall/login" class="form-horizontal" id="BForm" method="post" style="color: black">
                        <div class="form-group">
                            <label for="inputEmail3" class="col-sm-2 control-label" >用户名</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="inputEmail3" name="username"
                                       placeholder="请输入用户名">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">密码</label>
                            <div class="col-sm-10">
                                <input  :type="eye1" class="form-control" name="password" placeholder="请输入密码"
                                        required="required">
                                <a @click="showeye3" href="javascript:;" style="color:#000;"><i aria-hidden="true" class="fa fa-eye" style="position: absolute;right: 25px;top:7px" v-show="eye1=='password'"></i></a>
                                <a @click="showeye3" href="javascript:;" style="color:#000;"><i aria-hidden="true" class="fa fa-eye-slash" style="position: absolute;right: 25px;top:7px" v-show="eye1=='text'"></i></a>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-offset-2 col-sm-10">
                                <div class="checkbox">
                                    <label style="color: #0085ba">
                                        <input name="rem" type="checkbox"> 记住用户名和密码
                                    </label>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-offset-2 col-sm-10">
                                <button  class="btn btn-default" type="submit">登录</button>
                                <a class="d-block mt-1" href="resetpassword.html" >忘记密码？</a>
                                <span style="float: right;margin-top: 10px">还没有账号,快去<a href="/register.html" style="color: #007ffe" >注册</a>一个</span>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</section>




</div>
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
<!--引入vue和axios-->
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    let v1 = new Vue({
        el:"section"
        ,data:{
            haslogin:false,
            hasError:false,
            message:"",
            eye1:'password',
            show1:false,
            show2:false,
            show3:false,
        },
        created:function (){


        },
        mounted:function (){ //初始化完成后调用的方法
            let a = location.search.split("?")[1];
            if(a == "error"){
                this.show1 = true;
            }else if(a == "logout"){
                this.show2 = true;
             }else if(a == "register"){
                this.show3 = true;
            }
        }
        ,methods:{
            showeye3: function () {
                if (v1.eye1 == "password") {
                    v1.eye1 = "text";
                } else {
                    v1.eye1 = "password"
                }
            },
            login:function (){
                let data =new FormData(document.getElementById("BForm"))
                axios.post("/mall/login",data).then(function (r){
                    if (r.data == "ok") {
                        console.log("登录成功");
                        console.log(r.data);
                        v1.hasError = false;
                        location.href = '/admin/Mall/indexMall.html';
                    } else if(r.data == "你已经登陆过了,请先注销登陆后,再登录"){
                        v1.haslogin=true;
                        v1.hasError = true;
                        console.log("登录过---");
                        v1.message = r.data;
                    }else{
                        v1.show1 = false;
                        v1.show2 = false;
                        v1.show3 = false;
                        console.log("登录失败---");
                        console.log(r.data);
                        v1.hasError = true;
                        v1.message = r.data;
                    }
                })
            } ,logout:function (){
                if (confirm("您确认要登出嘛?")){
                    axios.post("/logOut").then(function (){
                        location.href="/login.html?logout"
                    })
                }
            }
        }
    })

</script>

</body>
</html>